html, body {
    background-color: #FFF; /* WHITE */
    margin: 0 auto;
    height: 100%;
    font-family: Helvetica, sans-serif;
}

#close-button {
  position: fixed;
  color: #000; /* BLACK */
  top: 0.16vw;
  right: 15px;
  font-size: 6.3vw;
  cursor: pointer;
  z-index: 9999;
  transition: top 0.5s ease;
}

/* Header styles */
#home {
    padding-left: .16em;
    color: #000;
    text-decoration: none;
}

#home:hover {
    color: #000;
    text-decoration: none;
}

.header {
    position: fixed;
    background-color: #FFF; /* WHITE */
    z-index: 1;
    width: 100%;
    top: -15vw;
    overflow: hidden; 
    -webkit-transition: top 0.5s ease, background-color 0.5s ease;
    transition: top 0.5s ease, background-color 0.5s ease;
}

.header a {
    color: #FFF; 
    font-size: 5.62vw;
    font-weight: 400;
    text-align: left;
    text-decoration: none;
    margin-top: .04em;
    padding: 0 .16em;
    padding: 0 .16em;
    float: left;
    user-select: none;
        -webkit-user-select: none;
}

.header-right {
    position: absolute;
    right: .24em;
}

.header-right a {
    color: #000;
    text-decoration: none; /* Remove the default underline */
    position: relative; /* Position relative for pseudo-element */
}

.header-right a::before {
    content: "";
    position: absolute;
    bottom: .13em;
    left: .16em;
    right: .16em;
    height: .08em; /* Height of the line-through */
    background-color: #000; /* Color of the line-through */
    transform: translateY(100%); /* Initially hidden below the text */
    transition: transform 0.3s ease; /* Transition the transform property */
    pointer-events: none; /* Allow clicking through the pseudo-element */
}

.header-right #work:hover::before,
.header-right #about:hover::before,
.header-right #contact:hover::before {
    transform: translateY(-520%); /* Move the line up to the middle of the text */
}

/* Fix the Header in FireFox */
@-moz-document url-prefix() {
    .header a {
        margin-top: .16em;
    }
}

/* Scroll Indicator */
.progress-container {
    position: fixed;
    bottom: 0;
    height: 12px;
    width: 100%;
    background: #000;
    z-index: 9999;
}
.progress-bar {
    height: 12px;
    width: 0%;
    background: #FFF; /* WHITE */
}

/* Project */
.cover {
    display: block; 
    max-width: 100%; 
    height: auto; 
    margin-left: auto;
    margin-right: auto;
    padding-right: 0;
}

.project {
    margin: 1.3vw;
}

.thiswork {
    clear: both;
    display: flex;
    color: #000;
}

.column {
    flex: 50%;
    padding: .65vw;
}

#title {
    margin-top: .22vw;
    padding-left: 0;
    font-size: 5.62vw;
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -.2vw;
}

#category {
    font-size: 2.8vw;
    letter-spacing: 0;
}

#intro {
    position: relative;
    padding-right: 0;
    font-size: 2.8vw;
    line-height: 1.25;
    color: #000;
    max-width: 98%;
}

.image {
    margin: 4vw auto;
    position: relative;
    max-width: 1400px;
}

.image-gif {
    margin: 4vw auto;
    position: relative;
    max-width: 1400px;
    overflow: hidden;
}

.inbetween {
    width: 100%;
    height: 2vw;
}

/* Menu Bar Icon */
.header .icon {
    display: none;
}
.menu-bar {
    display: inline-block;
    cursor: pointer;
    margin-right: -.03em;
}
.bar1, .bar3 {
    line-height: .2;
    transition: 0.3s;
}
.change .bar1 {
    transform: rotate(-45deg) translate(-.14em, .04em);
}
.change .bar3 {
    transform: rotate(45deg) translate(-.02em, -.08em);
}
@-moz-document url-prefix() {
    .change .bar1 {
    transform: rotate(-45deg) translate(-.08em, .08em);
    }
    .change .bar3 {
    transform: rotate(45deg) translate(-.06em, -.06em);
    }
}

/* Responsive header - Show Menu Icon */
@media screen and (max-width: 768px) {
    .header a {
        color: #000;
        font-size: 10vw;
    }
    .header-right {
        position: relative;
        right: 0;
    }
    .header-right a {
        display: none;
    }
    .header a.icon {
        float: right;
        display: inline-block;
    }
    .header {
        top: 0; /* Add this line to keep the header always visible */
    }

    .project {
        margin: 2vw;
    }

    #title {
        font-size: 10vw; /* Adjust the font size for the title */
    }

    #category {
        font-size: 4vw; /* Adjust the font size for the category */
        padding-left: .8vw;
    }

    .thiswork {
        display: block; /* Change the display to block to stack elements vertically */
    }

    .column {
        flex: 100%; /* Allow the elements to take the full width */
    }

    #intro {
        font-size: 5vw; /* Adjust the font size for the intro */
        line-height: 1.2;
        max-width: 100%; /* Ensure the intro text takes the full width of the container */
        margin-top: 1.5vw; /* Add some margin for separation from the title */
    }
    #close-button {
        display: none;
    }
    .cover {
        margin-top: 12vw;
    }
    .image, .image-gif {
        margin: 6vw .4vw;
    }
    .progress-container {
        display: none;
    }
}

/* Dropdown Menu */
@media screen and (max-width: 768px) {
    .header.responsive {
        position: fixed;
        background-color: #FFF; 
    }

    .header.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .header.responsive a {
        float: none;
        display: block;
        text-align: left;
        color: #000;
        background-color: #FFF;
    }
}

@media screen and (max-width: 480px) {
    .header a {
        font-size: 12vw;
    }
    #title {
        font-size: 12vw; /* Adjust the font size for the title */
    }
    #category {
        font-size: 4vw;
    }
    #intro {
        font-size: 6vw;
    }
    .cover {
        margin-top: 14vw;
    }
}